<template>
	<div class="wrap">
		<h3 class="tip">
			{{$route.params.setid}}号桌点餐
			<van-nav-bar left-text="返回" left-arrow  @click-left="onClickLeft" />
		</h3>
	<div class="van">
		<van-sidebar v-model="activeKey" @change="onChange" style="height: 100%;width: 70px;">
		   <van-sidebar-item title="热菜"/>
		   <van-sidebar-item title="凉菜" />
		   <van-sidebar-item title="酒水" />
		</van-sidebar>
	</div>
	<van-search v-model="value" placeholder="请输入搜索关键词" :error="true" @click="searchkey" />
	<div class="padd" style="margin-bottom: 45px;">
		<van-grid class="search" :column-num="2" square>
			<van-grid-item class="canel" v-for="item of search" v-if="item.foodname">
				<template slot-scope="text">
					<h5>
						{{item.foodname}}
						<h5 style="color: orangered;">￥{{item.price}}</h5>
					</h5>
				</template>
			</van-grid-item>
		</van-grid>
		<van-grid class="recai" :column-num="2" square>
			<van-grid-item class="canel" v-for="item of recai" v-if="xianshi" @click="diancai(item)">
				<template slot-scope="text">
					<h5>
						{{item.foodname}}
						<h5 style="color: orangered;">￥{{item.price}}</h5>
					</h5>
				</template>
			</van-grid-item>
		</van-grid>
		<van-grid :column-num="2" square>
			<van-grid-item class="canel" v-for="item of liangcai" v-if="xianshi1" @click="diancai(item)">
				<template slot-scope="text">
					<h5>
						{{item.foodname}}
						<h5 style="color: orangered;">￥{{item.price}}</h5>
					</h5>
				</template>
			</van-grid-item>
		</van-grid>
		<van-grid :column-num="2" square>
			<van-grid-item class="canel" v-for="item of jiushui" v-if="xianshi2" @click="diancai(item)">
				<template slot-scope="text">
					<h5>
						{{item.foodname}}
						<h5 style="color: orangered;">￥{{item.price}}</h5>
					</h5>
				</template>
			</van-grid-item>
		</van-grid>
	</div>
	<van-action-sheet v-model="show" title="已点菜品">
		 <div class="content">
			<van-list v-model="loading" :finished="finished">
				<van-cell  v-for="item in list" v-if="menu && item.count">
					<template>
						<span style="float: right;">
							￥{{item.price + item.foodname}}
							<van-stepper :disabled="istrue"  min="0" style="float: right;"  button-size="32px" v-model="item.count"/>
						</span>
					</template>
				</van-cell>
			</van-list>
			<van-list v-if="this.list.length"   v-model="loading" :finished="finished">
				<div style="margin-top: 20px; margin-bottom: 10px;">新增菜品</div>
				<van-cell v-for="item in newlist" v-if="menu && item.count">
					<template>
						<span style="float: right;">
							￥{{item.price + item.foodname}}
							<van-stepper  min="0" style="float: right;" @minus="fn"  button-size="32px" v-model="item.count"/>
						</span>
					</template>
				</van-cell>
			</van-list>
		</div>
	</van-action-sheet>
	<van-button class="select" style="float: left;" size="normal" type="primary" @click="menulist">已点菜品</van-button>
	<van-button v-if="!newlist.length" class="tijiao" style="float: right;" size="normal" type="primary" @click="tijiao(num)">￥{{num}}提交订单</van-button>
	<van-button v-if="newlist.length" class="tijiao" style="float: right;" size="normal" type="primary" @click="tijiao(num3)">￥{{num3}}提交订单</van-button>
</div>
</template>

<script>
	export default{
		data(){
			return{
				search:[],
				recai:[],
				liangcai:[],
				jiushui:[],
				activeKey: 0,
				xianshi:true,
				xianshi1:false,
				xianshi2:false,
				list: [],
				historylist:[],
				newlist:[],
				newcount:"",
				loading: true,
				finished: true,
				menu:false,
				value:"",
				show:false,
				num2:"",
				istrue:false,
				actions: [
					{ name: '' },
				]
			}
		},
		methods:{
			fn(){
			},
			onSelect(item) {
			      // 默认情况下点击选项时不会自动收起
			      // 可以通过 close-on-click-action 属性开启自动收起
			      this.show = false;
			      Toast(item.name);
			    },
			onClickLeft(){
				window.location.href=`${this.$locationurl}/#/about`
			},
			onChange(index) {
				if(index === 0){
					this.xianshi=true
					this.xianshi1=false
					this.xianshi2=false
					this.search = ""
				}
				if(index === 1){
					this.xianshi1=true
					this.xianshi=false
					this.xianshi2=false 
					this.search = ""
				}
				if(index === 2){
					this.xianshi2=true
					this.xianshi=false
					this.xianshi1=false
					this.search = ""
				}
			},
			diancai(data){
				//console.log(this.newlist)
				var setid = this.$route.params.setid
				var historynum3 = this.num
					if(this.historylist == 0){
						if(data.count == undefined){
							this.$set(data,"count",1)
							this.list.push(data)
							this.$toast.setDefaultOptions({ duration: 500 });
							this.$toast.success('点菜成功！');
						}
						else{
							data.count++
							this.$toast.success(`提示：该菜已点${data.count}份`);
						}
					}
					else{
						if(data.count  == undefined){
							this.$set(data,"count",1)
							this.newlist.push(data)
							this.$toast.setDefaultOptions({ duration: 500 });
							this.$toast.success('点菜成功！');
						}
						else{
							data.count++
							this.$toast.success(`提示：该菜已点${data.count}份`);
						}
					}	
			},
			menulist(){
				//console.log(this.newlist)
				this.show=true
				this.menu = true
			},
			tijiao(sum){
				var setid = this.$route.params.setid
				this.$axios.get(`${this.$httpurl}/getlength2?setid=${setid}&sum=${sum}`).then((response)=>{
					var samelength = response.data.length
					if(samelength !==1){
						var a = new Date()
						var hour = a.getHours()
						var minute = a.getMinutes()
						var second = a.getSeconds()
						var day = a.getDay()
						switch(day){
							case 1:{
								day = "一"
								break
							}
							case 2:{
								day = "二"
								break
							}
							case 3:{
								day = "三"
								break
							}
							case 4:{
								day = "四"
								break
							}
							case 5:{
								day = "五"
								break
							}
							case 6:{
								day = "六"
								break
							}
							case 0:{
								day = "日"
								break
							}
						}
						var list =this.list.concat(this.newlist)
						var settime = `星期${day} ${hour}时${minute}分${second}秒`
						var setid = this.$route.params.setid
						var list = JSON.stringify(list)
						var sumprice = sum
						if(setid&&sum){
							this.$axios.get(`${this.$httpurl}/upload?setid=${setid}&list=${list}&sumprice=${sumprice}&settime=${settime}`).then((response)=>{
								var data = response.data
								if(data == "success!"){
									this.$toast.setDefaultOptions({ duration: 1000 });
									this.$toast.success('订单提交成功！');
									window.location.href=`${this.$locationurl}/#/about`
									this.$axios.get(`${this.$httpurl}/change?setid=${setid}`).then((response)=>{
										//桌号状态已更新
									})
								}
								else{
									this.$toast.success('订单提交失败！');
								}
							})
						}
					}
					else{
						this.$toast.setDefaultOptions({ duration: 1000 });
						this.$toast.success('请添加新选菜品后再提交新订单！');
					}
				})
			},
			searchkey(){
				var search = this.value
				if(search){
					this.$axios.get(`${this.$httpurl}/getsearch?search=${search}`).then((response)=>{
						console.log(response.data)
						this.search = response.data
					})
				}
			},
		},
		mounted(){
			//console.log(this.$route.params)
			//获取菜单列表
			var setid = this.$route.params.setid
			this.$axios.get(`${this.$httpurl}/getfoodname`).then((response)=>{
				var data = response.data
				for(var item of data){
					if(item.fenlei ==0){
						this.recai.push(item) 
					}
					if(item.fenlei== 1){
						this.liangcai.push(item)
					}
					if(item.fenlei == 2){
						this.jiushui.push(item)
					}
				}
			})
			//获取历史订单
			this.$axios.get(`${this.$httpurl}/gethistory?setid=${setid}`).then((response)=>{
				if(response.data.length !==0){
					this.list=JSON.parse(response.data[0].foodlist)
					this.istrue = true
					this.historylist=response.data[0].foodlist
				}
			})
		},
		computed:{
			num(){
				var num = 0
				for(var item of this.list){
					num =num + item.price * item.count
				}
				this.num2 = num
				return num
			},
			num3(){
				var num3 = this.num2
				for(var item of this.newlist){
					num3=num3 + item.price * item.count
				}
				return num3
			}
		}
	}
</script>

<style>
	.van {
		width: 65px;
		height: 100%;
		float: left;
		position: fixed;
		left: 0;
		top: 63px;
		z-index: 10;
	}
	.van .van-sidebar-item {
		padding: 20px 12px 20px 0px;
	}
	.padd{
		padding-left:65px;
		margin-top: 98px;
	}
	.tip{
		position: fixed;
		top: 0;
		margin-top: 0;
		z-index: 10;
		line-height: 63px;
		width: 100%;
		background-color: #fff;
	}
	.wrap .select{
		position: fixed;
		padding: 0 20%;
		left: 0;
		bottom: 0;
		z-index: 3;
	}
	.wrap .tijiao{
		position: fixed;
		padding: 0 15%;
		right: 0;
		bottom: 0;
		z-index: 3;
	}
	.tip .van-nav-bar{
		height: 0px;
		line-height: 60px;
		font-weight: normal;
	}
	.wrap .van-search {
		position: fixed;
		margin-left: 70px;
		top: 54px;
		width: 300px;
		z-index: 10;
	}
	.content {
	  padding: 16px 16px 160px;
	}
</style>
